
import { Row, Col , Typography , Tabs , Form, Input, Button, Checkbox , message } from 'antd';
import "./index.less"
import {useRef,useEffect} from "react"
import { UserOutlined, LockOutlined , WhatsAppOutlined , MobileOutlined,PhoneOutlined , AppstoreOutlined  } from '@ant-design/icons';
import {Link} from "umi"
import {reg} from "@/utils/validate"
import {ajax} from "@/services/index"
import {history} from "umi"
const {Title } =Typography 

export default function RegisterPage(){
    useEffect(()=>{
      // console.log(ajax)
      // ajax.gettest()
      // .then(res=>{

      // })
    })
    const onFinish = async (value)=>{
        // 
        console.log(value)
        if(value.password!=value.dbpassword){
          message.error("两次密码输入不一致")
          console.log(dbpass)
          dbpass.current.focus();
        }else{
          // ajax 
          value.role = 1;
          let {code,result} = await ajax.register(value)
          if(code==200){
            history.push("/login?phone="+value.phone);
          }
        }
    }
    const onFinishFailed = ()=>{
      message.error("请输入有效的注册数据")
    }
    const form:any = useRef()
    const dbpass:any = useRef();
    return (
      <div className="login">
        <video 
          className="myvideo" 
          id="myvideo" 
          autoPlay  
          loop  
          playsInline
          muted
          src="http://47.104.209.44/mp/brkw.mp4"
        ></video>
        <Row >
            <Col className="login-box" xs={22} sm={18} md={12} lg={10} xl={6} xxl={4} >
                <Title className="title">欢迎学员注册</Title>   
                <Form
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    className="login-form"
                    ref={form}
                    wrapperCol={
                      { span:20,
                        offset:2
                      }
                    }
                >
                  <Form.Item
                      name="phone"
                      rules={[
                        { required: true, message: '请输入你的手机号码' },
                        { pattern:reg.phone,message:'请输入正确的手机号码'}
                      ]}
                    >
                      <Input prefix={<PhoneOutlined className="site-form-item-icon" />} placeholder="请输入你的手机号码" />
                  </Form.Item>
                  <Form.Item
                      name="username"
                      rules={[{ required: true, message: '请输入你的用户名' }]}
                    >
                      <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入你的用户名" />
                  </Form.Item>
                  <Form.Item
                      name="password"
                      rules={[
                        { required: true, message: '请输入你的密码' },
                        { pattern:reg.pwd, message: '请输入6-16位的数字和字母组合' }
                      ]}
                    >
                      <Input.Password  prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入你的密码" />
                  </Form.Item>
                  <Form.Item
                      name="dbpassword"
                      rules={[
                        { required: true, message: '请输入你的确认密码' },
                        { pattern:reg.pwd, message: '请输入6-16位的数字和字母组合' }
                      ]}
                    >
                      <Input.Password ref={dbpass} prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入你的确认密码" />
                  </Form.Item>
                  <Form.Item >
                    <Button type="primary" block htmlType="submit" className="login-form-button">
                      注册
                    </Button>
                  </Form.Item>
                  <Form.Item className="links"  style={{display:'flex',justifyContent:'space-between'}}>
                      <Link style={{color:"#f50",fontSize:13}} to="/login">已有账号,前往登陆</Link>
                      <Link style={{color:"#999",fontSize:13}} to="/forgetpass">忘记密码</Link>
                  </Form.Item>
                </Form>
            </Col>
        </Row>
      </div>
    )
}